<template>
    <view>
        <view @tap.stop.prevent="showPostSelect">
            <slot></slot>
        </view>
        <view class="Mask" v-if="postShow" @tap.stop.prevent="hidePostSelect">
            <view class="maskContain" @tap.stop.prevent="contain">
                <view>请选择发帖类型</view>
                <view class="postType" id="0" @tap.stop.prevent="postThread" v-if="!allowspecialonly">
                    <image src="/static/image/thread_ordinary.png"></image>
                    <view class="typeText">普通帖</view>
                </view>
                <view class="postType" id="1" @tap.stop.prevent="postThread" v-if="group.allowpostpoll">
                    <image src="/static/image/thread_vote.png"></image>
                    <view class="typeText">投票帖</view>
                </view>
                <view class="postType" id="4" @tap.stop.prevent="postThread" v-if="group.allowpostactivity">
                    <image src="/static/image/thread_activity.png"></image>
                    <view class="typeText">活动帖</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            postShow: false,
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        // postShow: {
        //     type: Boolean
        // },
        group: {
            type: Object
        },
        allowspecialonly: {
            type: String
        },
        postTypeArr: {
            type: Array
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {
        showPostSelect() {
            if (this.postTypeArr.length === 1) {
                return;
            }

            this.postShow= true;
        },

        hidePostSelect() {
            this.postShow= false;
        },

        postThread(e) {
            this.$emit('postThread', {
                detail: e.currentTarget.id
            });
            this.postShow= false;
        },

        contain() {
            console.log('占位：函数 contain 未声明');
        }
    }
};
</script>
<style>
@import './post_selectMask.css';
</style>
